<template>
  <t-dialog v-model:visible="model" :header="dialogTitle" :confirm-loading="confirmPending" confirm-btn="确定" @closed="handleDialogClose" @confirm="handleConfirm">
    <t-form ref="channelForm" :data="channelFormData" :rules="rules">
      <t-form-item label="渠道名称" name="companyName">
        <t-input v-model="channelFormData.companyName" placeholder="请输入渠道名称(公司名称)" type="text" />
      </t-form-item>
      <t-form-item label="联系人" name="contactPerson">
        <t-input v-model="channelFormData.contactPerson" placeholder="请输入联系人" type="text" />
      </t-form-item>
      <t-form-item label="联系电话" name="phone">
        <t-input v-model="channelFormData.phone" placeholder="请输入联系电话" type="text" />
      </t-form-item>
      <t-form-item label="合作方式" name="settType">
        <t-select v-model="channelFormData.settType" placeholder="请输入联系邮箱" type="email">
          <t-option v-for="item in ChannelSettType" :key="item" :label="channelSettTypeDict[item]" :value="item" />
        </t-select>
      </t-form-item>
      <t-form-item label="启用" name="enabled">
        <t-switch v-model="channelFormData.enabled" :custom-value="[EnabledStatus.ENABLED, EnabledStatus.DISABLED]" />
      </t-form-item>
      <!-- <t-form-item label="渠道密码" name="channelPassword">
        <t-input placeholder="请输入渠道账号密码" type="password" autocomplete="new-password" />
      </t-form-item> -->
      <!-- https://stackoverflow.com/questions/50186223/autocomplete-new-password-and-making-them-confirm-it-via-entering-the-password-a -->
      <!-- https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands/ -->
      <!-- <t-form-item label="密码确认" name="channelConfirmPassword">
        <t-input placeholder="请再次输入渠道账号密码" type="password" autocomplete="new-password" />
      </t-form-item> -->
    </t-form>
  </t-dialog>
</template>
<script setup lang="ts">
import type { FormInstanceFunctions, FormRules } from 'tdesign-vue-next'
import { MessagePlugin } from 'tdesign-vue-next'
import { computed, reactive, ref, useTemplateRef } from 'vue'

import { createChannel, updateChannel } from '@/api/channel'
import type { ChannelReqData } from '@/api/model/channel'
import { ChannelSettType } from '@/api/model/channel'
import { EnabledStatus } from '@/api/model/common'
import { channelSettTypeDict } from '@/utils/dict/channel'

const props = defineProps<{ id?: string, data: ChannelFormDialogData }>()
const emits = defineEmits<{ (e: 'success'): void }>()
const model = defineModel('visible', { type: Boolean })
const isEditMode = computed(() => !!props.id)
const dialogTitle = computed(() => (isEditMode.value ? '编辑渠道' : '添加渠道'))
export type ChannelFormDialogData = ChannelReqData
// https://cn.vuejs.org/guide/components/props.html#mutating-object-array-props
// https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive-proxy-vs-original-1
// prop.data 是 reactive proxy 对象  channelFormData 和 prop.data 指向同一个对象
const channelFormData = reactive<ChannelReqData>(props.data)
const rules: FormRules<typeof channelFormData> = {
  companyName: [{ required: true, message: '请输入公司名称', type: 'error' }],
  contactPerson: [{ required: true, message: '请输入联系人', type: 'error' }],
  phone: [{ required: true, message: '请输入手机号', type: 'error' }],
  enabled: [{ required: true, message: '请选择状态', type: 'error' }],
}
const channelForm = useTemplateRef<FormInstanceFunctions<typeof channelFormData>>('channelForm')
const confirmPending = ref(false)
function handleConfirm() {
  channelForm.value?.validate().then((validateResult) => {
    if (validateResult === true) {
      confirmPending.value = true
      if (isEditMode.value) {
        updateChannel({ id: props.id!, ...channelFormData }).then(() => {
          confirmPending.value = false
          model.value = false
          MessagePlugin.success('更新成功')
          emits('success')
        })
      }
      else {
        createChannel(channelFormData).then(() => {
          confirmPending.value = false
          model.value = false
          MessagePlugin.success('创建成功')
          emits('success')
        })
      }
    }
  })
}
function handleDialogClose() {
  channelForm.value?.clearValidate()
}
</script>
<style scoped>

</style>
